<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gravity Brain</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" href="../static/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href="../static/css/adminlte.min.css">
{#  <script type="text/javascript">
        // 定义一个函数来刷新页面
        function autoRefreshPage() {
            window.location.reload();
        }


        setTimeout(autoRefreshPage, 20000);
  </script>#}
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- Preloader -->
  <!--<div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>-->

  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-dark">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">气象环境信息</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a  class="brand-link">
      <img src="../static/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">重力波大脑</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- 使用 .nav-icon 类添加图标，
               或使用 font-awesome 或其他任何图标字体库 -->
          <li class="nav-item menu-open">
            <a href="index.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                首页
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="index3.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                气象环境信息
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="kgs.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统知识图谱展示
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="index2.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统功能展示
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                功能交互
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="detect.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>图像受气象干扰影响</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="anoinv.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波反演温度预测</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="generation.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波图像生成</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
  <div class="content-wrapper">
    <!-- 内容标题（页面标题） -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">重力波系统状态信息</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">Gravity Brain</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- 主体内容 -->
    <section class="content">
      <div class="container-fluid">

{#          <div class="row">#}
{#          <div class="col-md-12">#}
{##}
{#            <div class="card">#}
{#              <div class="card-body p-0">#}
{#                <table class="table table-striped">#}
{#                  <thead>#}
{#                    <tr>#}
{#                      <th style="width: 15%">数据类型</th>#}
{#                      <th style="width: 35%">时间</th>#}
{#                      <th style="width: 35%">数据值</th>#}
{#                      <th style="width: 15%"></th>#}
{#                    </tr>#}
{#                  </thead>#}
{#                  <tbody>#}
{#                    <tr>#}
{#                      <td>温度一</td>#}
{#                      <td>#}
{#                        <div id="sensortime1"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs">#}
{#                          <div class="progress-bar bg-success" id="sensorline1" style="width: 55%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata1">55%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>温度二</td>#}
{#                      <td>#}
{#                        <div id="sensortime2"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs">#}
{#                          <div class="progress-bar bg-success" id="sensorline2" style="width: 70%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata2">70%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>相对湿度</td>#}
{#                      <td>#}
{#                        <div id="sensortime3"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs progress-striped active">#}
{#                            <div class="progress-bar bg-success" id="sensorline3" style="width: 30%"></div>#}
{#                            </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata3">55%</span></td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td>噪声</td>#}
{#                      <td>#}
{#                        <div id="sensortime4"></div>#}
{#                      </td>#}
{#                      <td>#}
{#                          <div class="progress progress-xs progress-striped active">#}
{#                          <div class="progress-bar bg-success" id="sensorline4" style="width: 90%"></div>#}
{#                        </div>#}
{#                      </td>#}
{#                        <td><span id="sensordata4">55%</span></td>#}
{#                    </tr>#}
{#                  </tbody>#}
{#                </table>#}
{#              </div>#}
{#              <!-- /.card-body -->#}
{#            </div>#}
{#            <!-- /.card -->#}
{#          </div>#}
{#          <!-- /.col -->#}
{#        </div>#}
          <!-- 图像数据 -->
          <div class="row">
              <div class="col-md-12">
                  <!-- USERS LIST -->
                  <div class="card">
                      <div class="card-header">
                          <h3 class="card-title">CCD相机拍摄图片</h3>

                          <div class="card-tools">
                              <span class="badge badge-danger"></span>
                              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                  <i class="fas fa-minus"></i>
                              </button>
                              <button type="button" class="btn btn-tool" data-card-widget="remove">
                                  <i class="fas fa-times"></i>
                              </button>
                          </div>
                      </div>
                      <!-- /.card-header -->
                      <div class="card-body p-0">
                          <ul class="users-list clearfix">
                              <li>
                                  <div id="picture1"></div>
                                  <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                  <span><div id="timestamp1"></div></span>
                              </li>
                              <li>
                                  <div id="picture2"></div>
                                  <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                  <span><div id="timestamp2"></div></span>
                              </li>
                              <li>
                                  <div id="picture3"></div>
                                  <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                  <span><div id="timestamp3"></div></span>
                              </li>
                              <li>
                                  <div id="picture4"></div>
                                  <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                  <span><div id="timestamp4"></div></span>
                              </li>
                          </ul>
                          <!-- /.users-list -->
                      </div>
                      <!-- /.card-body -->
                      <!-- /.card-footer -->
                  </div>
                  <!--/.card -->
              </div>
              <!-- /.col (LEFT) -->

              <!--          <div class="col-md-6">-->
              <!--            <div class="card">-->
              <!--              <div class="card-header">-->
              <!--                <h3 class="card-title">故障预测分析</h3>-->

              <!--                <div class="card-tools">-->
              <!--                  <button type="button" class="btn btn-tool" data-card-widget="collapse">-->
              <!--                    <i class="fas fa-minus"></i>-->
              <!--                  </button>-->
              <!--                  <button type="button" class="btn btn-tool" data-card-widget="remove">-->
              <!--                    <i class="fas fa-times"></i>-->
              <!--                  </button>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              &lt;!&ndash; /.card-header &ndash;&gt;-->
              <!--              <div class="card-body">-->
              <!--                <div class="row">-->
              <!--                  <div class="col-md-8">-->
              <!--                    <div class="chart-responsive">-->
              <!--                        <div id = "malfunctionChart" style = "width:600px;height:500px";></div>-->
              <!--                    </div>-->
              <!--                    &lt;!&ndash; ./chart-responsive &ndash;&gt;-->
              <!--                  </div>-->
              <!--                  &lt;!&ndash; /.col &ndash;&gt;-->
              <!--                  <div class="col-md-4">-->
              <!--                  </div>-->
              <!--                  &lt;!&ndash; /.col &ndash;&gt;-->
              <!--                </div>-->
              <!--                &lt;!&ndash; /.row &ndash;&gt;-->
              <!--              </div>-->
              <!--              &lt;!&ndash; /.card-body &ndash;&gt;-->
              <!--              <div class="card-footer p-0">-->
              <!--                <ul class="nav nav-pills flex-column">-->
              <!--                  <div id="malfunction"></div>-->
              <!--                </ul>-->
              <!--              </div>-->
              <!--              &lt;!&ndash; /.footer &ndash;&gt;-->
              <!--            </div>-->
              <!--            &lt;!&ndash; /.card &ndash;&gt;  -->
              <!--          </div>-->
              <!-- /.col (RIGHT) -->
          </div>

          <!-- 状态数据 -->
          <div class="row">

              <div class="col-sm-3 col-6">
                  <div class="card">
                      <div class="card-header border-0">
                          <h3 class="card-title">传感器1温度一</h3>
                          <div class="card-tools">
                              <span class="badge badge-light"><div id="first_sensor_time1"></div></span>
                          </div>
                      </div>

                      <div class="card-body">
                          <div id="first_sensor_first_temperature_chart" style="text-align: left;height: 350px"></div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3 col-6">
                  <div class="card">
                      <div class="card-header border-0">
                          <h3 class="card-title">传感器1温度二</h3>
                          <div class="card-tools">
                              <span class="badge badge-light"><div id="first_sensor_time2"></div></span>
                          </div>
                      </div>
                      <div class="card-body">
                          <div id="first_sensor_second_temperature_chart" style="text-align: left;height: 350px"></div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3 col-6">
                  <div class="card">
                      <div class="card-header border-0">
                          <h3 class="card-title">传感器1相对湿度</h3>
                          <div class="card-tools">
                              <span class="badge badge-light"><div id="first_sensor_time3"></div></span>
                          </div>
                      </div>
                      <div class="card-body">
                          <div id="first_sensor_humidity" style="text-align: left;height: 350px"></div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3 col-6">
                  <div class="card">
                      <div class="card-header border-0">
                          <h3 class="card-title">噪声传感器</h3>
                          <div class="card-tools">
                              <span class="badge badge-light"><div id="noise_sensor_time"></div></span>
                          </div>
                      </div>
                      <div class="card-body">
                          <div id="noise_chart" style="text-align: left;height: 350px"></div>
                      </div>
                  </div>
              </div>
          </div>

          <!-- 气象数据块 -->
          <div class="row">
              <div class="col-md-12">
                  <div class="card">
                      <div class="card-header d-flex justify-content-between">
                          <h3 class="card-title"  style="font-size:1.8rem;color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)">
                              气象数据可视化面板</h3>
                          <div class="timestamp-box">
                              <i class="fas fa-clock text-info"></i>
                              <span id="global-timestamp" class="ml-2" style="font-size:1.2rem;color:#fff"></span>
                          </div>
                      </div>
                      <div class="card-body">
                          <!-- 第一行：温度仪表盘 -->
                          <div class="row mb-4">
                              <!-- 外界温度 -->
                              <div class="col-md-6">
                                  <div class="card bg-dark">
                                      <div class="card-body text-center">
                                          <div id="externalTempGauge" style="height:220px"></div>
                                          <h5 class="text-muted mt-2">外界温度 (°C)</h5>
                                          <div class="timestamp-label">
                                              更新时间：<span id="temp-timestamp"></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <!-- 地表温度 -->
                              <div class="col-md-6">
                                  <div class="card bg-dark">
                                      <div class="card-body text-center">
                                          <div id="surfaceTempGauge" style="height:220px"></div>
                                          <h5 class="text-muted mt-2">地表温度 (°C)</h5>
                                          <div class="timestamp-label">
                                              更新时间：<span id="ts-timestamp"></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>

                          <!-- 第二行：湿度与风参数 -->
                          <div class="row mb-4">
                              <div class="col-md-4">
                                  <div class="card bg-dark">
                                      <div class="card-body text-center">
                                          <div id="humidityChart" style="height:220px"></div>
                                          <h5 class="text-muted mt-2">外界湿度 (%)</h5>
                                          <div class="timestamp-label">
                                              更新时间：<span id="humidity-timestamp"></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <!-- 风参数仪表盘 -->
                              <div class="col-md-8">
                                  <div class="card bg-dark">
                                      <div class="card-body">
                                          <div class="row">
                                              <div class="col-md-3 text-center">
                                                  <div class="wind-dial-container">
                                                      <div class="wind-direction-arrow" id="windArrow"></div>
                                                      <canvas id="windDirection"></canvas>
                                                  </div>
                                                  <div class="wind-info mt-2">
                                                      <span class="badge bg-warning"
                                                            style="font-size: 1.2rem">风向</span>
                                                      <div class="d-flex flex-column align-items-center mt-2">
                                                          <div class="d-flex align-items-baseline">
                                                              <span id="wind_direction" class="h2 mb-0">0</span>
                                                              <span class="h4 mb-0 ml-1">°</span>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="col-md-9">
                                                  <div class="param-grid">
                                                      <div class="param-item">
                                                          <i class="fas fa-wind param-icon"></i>
                                                          <span class="param-label">风速</span>
                                                          <span id="wind_speed" class="param-value"></span>
                                                          <span class="param-unit">m/s</span>
                                                      </div>
                                                      <div class="param-item">
                                                          <i class="fas fa-tachometer-alt param-icon"></i>
                                                          <span class="param-label">气压</span>
                                                          <span id="air_pressure" class="param-value"></span>
                                                          <span class="param-unit">hPa</span>
                                                      </div>
                                                      <div class="param-item">
                                                          <i class="fas fa-eye param-icon"></i>
                                                          <span class="param-label">能见度</span>
                                                          <span id="visibility" class="param-value"></span>
                                                          <span class="param-unit">km</span>
                                                      </div>
                                                  </div>
                                                  <div class="timestamp-label mt-3">
                                                      最后更新：<span id="wind-timestamp"></span>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>

                          <!-- 第三行：辐射监测 -->
                          <div class="row mb-4">
                              <div class="col-md-8">
                                  <div class="card bg-dark">
                                      <div class="card-body">
                                         <h5 style="font-size:1.4rem;color:#ffd700"><i
                                                  class="fas fa-satellite-dish mr-2"></i>辐射监测</h5>
                                          <div class="radiation-grid">
                                              <div class="radiation-item">
                                                  <div class="progress-container">
                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">
                                                          太阳下行 <span id="swd-value"></span> W/m²
                                                      </div>
                                                      <div class="progress"
                                                           style="height:25px;background:rgba(255,255,255,0.1)">
                                                          <div id="swdProgress"
                                                               class="progress-bar bg-warning progress-bar-striped"></div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="radiation-item">
                                                  <div class="progress-container">
                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">
                                                          太阳上行 <span id="swu-value"></span> W/m²
                                                      </div>
                                                      <div class="progress"
                                                           style="height:25px;background:rgba(255,255,255,0.1)">
                                                          <div id="swuProgress"
                                                               class="progress-bar bg-danger progress-bar-striped"></div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="radiation-item">
                                                  <div class="progress-container">
                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">
                                                          长波下行 <span id="lwd-value"></span> W/m²
                                                      </div>
                                                      <div class="progress"
                                                           style="height:25px;background:rgba(255,255,255,0.1)">
                                                          <div id="lwdProgress"
                                                               class="progress-bar bg-orange progress-bar-striped"></div>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="radiation-item">
                                                  <div class="progress-container">
                                                      <div class="progress-label" style="color:#fff;font-size:1.1rem">
                                                          长波上行 <span id="lwu-value"></span> W/m²
                                                      </div>
                                                      <div class="progress"
                                                           style="height:25px;background:rgba(255,255,255,0.1)">
                                                          <div id="lwuProgress"
                                                               class="progress-bar bg-purple progress-bar-striped"></div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="timestamp-label mt-2">
                                              更新时间：<span id="radiation-timestamp"></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                              <!-- 电压历史图表 -->
                              <div class="col-md-4">
                                  <div class="card bg-dark">
                                      <div class="card-body">
                                          <h5 style="font-size:1.4rem;color:#00ff00"><i
                                                  class="fas fa-chart-line mr-2"></i>电压历史</h5>
                                          <div id="voltageHistoryChart" style="height:260px"></div>
                                          <div class="timestamp-label mt-2" style="color:#fff">
                                              最后更新：<span id="voltage-timestamp"></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>

                          <!-- 第四行：降水与积雪 -->
                          <div class="row">
                              <div class="col-md-6">
                                  <div class="card bg-dark">
                                      <div class="card-body">
                                          <div class="precipitation-box">
                                              <i class="fas fa-cloud-rain fa-3x text-primary"></i>
                                              <div class="precipitation-info">
                                                  <div class="precipitation-value">
                                                      <span id="precipitation"></span>
                                                      <span class="unit">mm</span>
                                                  </div>
                                                  <div class="precipitation-label">降水量</div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <div class="card bg-dark">
                                      <div class="card-body">
                                          <div class="snow-box">
                                              <i class="fas fa-snowflake fa-3x text-info"></i>
                                              <div class="snow-info">
                                                  <div class="snow-value">
                                                      <span id="sd"></span>
                                                      <span class="unit">cm</span>
                                                  </div>
                                                  <div class="snow-label">雪深</div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

{#        <!-- 异常检测块 -->#}
{#        <div class="row">#}
{#          <div class="col-md-12">#}
{#            <div class="card">#}
{#              <div class="card-header">#}
{#                <h5 class="card-title">重力波图像质量受气象条件影响</h5>#}
{#              </div>#}
{#              <!-- /.card-header -->#}
{#              <div class="card-body">#}
{#                <div class="row">#}
{#                  <div class="col-md-12">#}
{#                    <div class="card card-info">#}
{#                      <div>#}
{#                        <img  id="newest-detect-img" class="col-md-12">#}
{#                      </div>#}
{#                    </div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#              <!-- ./card-body -->#}
{#              <div class="card-footer">#}
{#                <div class="row">#}
{#                  <div class="col-md-12">#}
{#                    <div class="card card-info card-outline">#}
{#                      <div class="card-header">#}
{#                        <h3 class="card-title">重力波图像质量受气象条件影响指数曲线</h3>#}
{#                      </div>#}
{#                      <div class="card-body">#}
{#                        <div class="chart">#}
{#                            <div class="col-md-12" style="background-color: #FFFFFF">#}
{#                                <canvas id="myChart" style="width: 250px; height: 50px"></canvas>#}
{#                            </div>#}
{#                        </div>#}
{#                      </div>#}
{#                    </div>#}
{#                  </div>#}
{#                </div>#}
{##}
{#              </div>#}
{#                <!-- /.row -->#}
{#            </div>#}
{#              <!-- /.card-footer -->#}
{#          </div>#}
{#            <!-- /.card -->#}
{#        </div>#}

        <!-- 反演温度对比曲线块 -->
{#        <div class="row">#}
{#          <div class="col-md-2">#}
{#            <div class="card card-outline">#}
{#              <div class="card-header">#}
{#                <h3 class="card-title">#}
{#                  重力波图像#}
{#                </h3>#}
{#              </div>#}
{#              <div class="card-body">#}
{#                <img class="col-md-12" id="newest-spectrogram-img">#}
{#              </div>#}
{#            </div>#}
{#          </div>#}
{#          <div class="col-md-12">#}
{#            <div class="card card-outline">#}
{#              <div class="card-header">#}
{#                <h3 class="card-title">#}
{#                  <i class="far fa-chart-bar"></i>#}
{#                  反演温度折线图(单位：K，开尔文温度)#}
{#                </h3>#}
{#              </div>#}
{#              <div class="card-body">#}
{#                    <div id="line-Chart" style="height: 300px; background-color: white"></div>#}
{#              </div>#}
{#            </div>#}
{#          </div>#}
{#            <div class="col-md-10">#}
{#                        <!-- AREA CHART -->#}
{#                        <div class="card card-primary">#}
{#                            <div class="card-header">#}
{#                                <h3 class="card-title">反演温度折线图(单位：K，开尔文温度)</h3>#}
{##}
{#                                <div class="card-tools">#}
{#                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">#}
{#                                        <label class="btn btn-secondary">#}
{#                                            <input type="radio" name="options1" value="on" id="option_a1" autocomplete="off" checked>ON#}
{#                                        </label>#}
{#                                        <label class="btn btn-secondary">#}
{#                                            <input type="radio" name="options1" value="off" id="option_a2" autocomplete="off" >OFF#}
{#                                        </label>#}
{#                                    </div>#}
{#                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">#}
{#                                        <i class="fas fa-minus"></i>#}
{#                                    </button>#}
{#                                    <button type="button" class="btn btn-tool" data-card-widget="remove">#}
{#                                        <i class="fas fa-times"></i>#}
{#                                    </button>#}
{#                                </div>#}
{#                            </div>#}
{#                            <div class="card-body">#}
{#                                <div id = "first_sensor_temperature_chart" style="height:400px;"></div>#}
{#                            </div>#}
{#                            <!-- /.card-body -->#}
{#                        </div>#}
{#                        <!-- /.card -->#}
{#            </div>#}
{#        </div>#}


{#        <div class="row">#}
{#          <div class="col-md-12">#}
{#            <div class="card">#}
{#              <div class="card-header">#}
{#                <h5 class="card-title">预测图像生成</h5>#}
{#              </div>#}
{#              <!-- /.card-header -->#}
{#              <div class="card-body">#}
{#                <div class="row">#}
{#                  <div class="col-md-12">#}
{#                    <div class="card card-info">#}
{#                      <div>#}
{#                        <img  id="newest-sum-img" class="col-md-4">#}
{#                        <img  id="newest-generation-img" class="col-md-3">#}
{#                        <img  id="newest-generation-BG-img" class="col-md-4">#}
{#                      </div>#}
{#                    </div>#}
{#                  </div>#}
{#                </div>#}
{#              </div>#}
{#            </div>#}
{#              <!-- /.card-footer -->#}
{#          </div>#}
{#            <!-- /.card -->#}
{#        </div>#}

{#        <!-- 历史数据统计 -->#}
{#        <div class="row">#}
{#          <!-- Left col -->#}
{#          <div class="col-md-12">#}
{#            <!-- TABLE: LATEST ORDERS -->#}
{#            <div class="card">#}
{#              <div class="card-header border-transparent">#}
{#                <h3 class="card-title">历史数据</h3>#}
{#              </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp0"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report0"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp1"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report1"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp2"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report2"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp3"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report3"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp4"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report4"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp5"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report5"></div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-12" style="height: auto !important;">#}
{#                    <div class="card card-success">#}
{#                        <div class="card-header">#}
{#                            <h3 class="card-title" id="timetamp6"></h3>#}
{#                            <div class="card-tools">#}
{#                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>#}
{#                                </button>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="card-body" style="display: block;" id="report6"></div>#}
{#                    </div>#}
{#                </div>#}
{#              <!-- /.card-header -->#}
{#              <div class="card-body p-0">#}
{#                <div class="table-responsive">#}
{#                  <table class="table m-0">#}
{#                    <thead>#}
{#                    <tr>#}
{#                      <th>时间</th>#}
{#                      <th>编号</th>#}
{#                      <th>状态</th>#}
{#                      <th>结果报告</th>#}
{#                    </tr>#}
{#                    </thead>#}
{#                    <tbody>#}
{#                    <tr>#}
{#                      <td id="timetamp0"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report0"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp1"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report1"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp2"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report2"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp3"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report3"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp4"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report4"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp5"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report5"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    <tr>#}
{#                      <td id="timetamp6"></td>#}
{#                      <td>#}
{#                        <div class="sparkbar" data-color="#00a65a" data-height="20" id="report6"></div>#}
{#                      </td>#}
{#                    </tr>#}
{#                    </tbody>#}
{#                  </table>#}
{#                </div>#}
{#                <!-- /.table-responsive -->#}
{#              </div>#}
{#              <!-- /.card-body -->#}
{#              <div class="card-footer clearfix">#}
{#                <a href="javascript:void(0)" class="btn btn-sm btn-info float-left">下新订单</a>#}
{#                <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-right">查看所有订单</a>#}
{#              </div>#}
{#              <!-- /.card-footer -->#}
{#            </div>#}
{#            <!-- /.card -->#}
{#          </div>#}
{#          <!-- /.col -->#}
{##}
{#    </div>#}

      </div>
    </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 控制侧边栏内容在这里 -->
  </aside>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  <!--<footer class="main-footer">
    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
    保留所有权利。
    <div class="float-right d-none d-sm-inline-block">
      <b>版本</b> 3.2.0
    </div>
  </footer>-->
</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->
<!-- jQuery -->
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../static/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../static/plugins/raphael/raphael.min.js"></script>
<script src="../static/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../static/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>

<!-- 用于演示 AdminLTE  -->
<script src="../static/js/demo.js"></script>
<!-- AdminLTE 仪表盘演示（仅用于演示） -->
{#<script src="../static/js/pages/dashboard2.js"></script>#}


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<!-- AdminLTE App -->
<script src="../static/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="../static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE 插件 - 允许在调整窗口大小时重新绘制图表 -->
<script src="../static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE 插件 - 也用于绘制环形图 -->
<script src="../static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- uPlot -->
<script src="../static/plugins/uplot/uPlot.iife.min.js"></script>

<script src="../static/plugins/echart/echart.js"></script>

{#时间格式化#}
<script>
    function formatDateTime (date) {
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0'+second):second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;

    }
</script>

<!-- 传感器数据表格 -->
{#<script>#}
{#    let firstSensorTime;#}
{#    let secondSensorTime;#}
{#    let noiseSensorTime;#}
{#    let firstSensorFirstTemperature;#}
{#    let firstSensorSecondTemperature;#}
{#    let firstSensorHumidity;#}
{#    let secondSensorFirstTemperature;#}
{#    let secondSensorSecondTemperature;#}
{#    let secondSensorFirstHumidity;#}
{#    let secondSensorSecondHumidity;#}
{#    let noise;#}
{#    function loadSensorData() {#}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentTemperature",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
                {#console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                firstSensorTime = formatDateTime(date);#}
{#                firstSensorFirstTemperature = map.first_temperature;#}
{#                firstSensorSecondTemperature = map.second_temperature;#}
{#                firstSensorHumidity = map.humidity;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("sensortime1").innerText = firstSensorTime;#}
{#                document.getElementById("sensortime2").innerText = firstSensorTime;#}
{#                document.getElementById("sensortime3").innerText = firstSensorTime;#}
{#                document.getElementById("sensordata1").innerText = firstSensorFirstTemperature + '℃';#}
{#                document.getElementById("sensordata2").innerText = firstSensorSecondTemperature + '℃';#}
{#                document.getElementById("sensordata3").innerText = firstSensorHumidity + '%';#}
{#                document.getElementById("sensorline1").style.width = firstSensorFirstTemperature + '%';#}
{#                document.getElementById("sensorline2").style.width = firstSensorSecondTemperature + '%';#}
{#                document.getElementById("sensorline3").style.width = firstSensorHumidity + '%';#}
{##}
{#                // 更新图表#}
{#                updateFirstSensorCharts();#}
{#            }#}
{#        });#}
{##}
{#        $.ajax({#}
{#            type: "post",#}
{#            async: true,#}
{#            url: "/api/findCurrentNoise",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data));#}
{#                map = map.get("0")#}
{#                console.log(map)#}
{#                let date = new Date(Date.parse(map.detection_time));#}
{#                noiseSensorTime = formatDateTime(date);#}
{#                noise = map.noise;#}
{##}
{#                // 更新相关的 DOM#}
{#                document.getElementById("sensortime4").innerText = noiseSensorTime;#}
{#                document.getElementById("sensordata4").innerText = noise + 'dB';#}
{#                document.getElementById("sensorline4").style.width = noise + '%';#}
{##}
{##}
{#                // 更新图表#}
{#                updateNoiseChart();#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    // 更新第一个传感器图表#}
{#    function updateFirstSensorCharts() {#}
{#        let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');#}
{#        let fsftc_myChart = echarts.init(fsftc_chartDom);#}
{#        let fsftc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorFirstTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsftc_option && fsftc_myChart.setOption(fsftc_option);#}
{##}
{#        // 第二个温度仪表盘#}
{#        let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');#}
{#        let fsstc_myChart = echarts.init(fsstc_chartDom);#}
{#        let fsstc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}℃'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '温度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: -30,#}
{#                    max: 30,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorSecondTemperature,#}
{#                            name: '温度 (℃)'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{##}
{#        fsstc_option && fsstc_myChart.setOption(fsstc_option);#}
{##}
{#        // 湿度仪表盘#}
{#        let fshc_chartDom = document.getElementById('first_sensor_humidity');#}
{#        let fshc_myChart = echarts.init(fshc_chartDom);#}
{#        let fshc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}%'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '相对湿度',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: firstSensorHumidity,#}
{#                            name: '相对湿度（%）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        fshc_option && fshc_myChart.setOption(fshc_option);#}
{#    }#}
{##}
{#    // 噪声传感器图表更新#}
{#    function updateNoiseChart() {#}
{#        let nc_chartDom = document.getElementById('noise_chart');#}
{#        let nc_myChart = echarts.init(nc_chartDom);#}
{#        let nc_option = {#}
{#            tooltip: {#}
{#                formatter: '{a} <br/>{b} : {c}db'#}
{#            },#}
{#            series: [#}
{#                {#}
{#                    name: '噪声',#}
{#                    type: 'gauge',#}
{#                    progress: {#}
{#                        show: true#}
{#                    },#}
{#                    itemStyle: {#}
{#                        color: '#58D9F9',#}
{#                        shadowColor: 'rgba(0,138,255,0.45)',#}
{#                        shadowBlur: 10,#}
{#                        shadowOffsetX: 2,#}
{#                        shadowOffsetY: 2#}
{#                    },#}
{#                    title: {#}
{#                        textStyle: {#}
{#                            fontWeight: 'bolder',#}
{#                            fontSize: 20,#}
{#                            color: 'white'#}
{#                        }#}
{#                    },#}
{#                    min: 0,#}
{#                    max: 100,#}
{#                    detail: {#}
{#                        valueAnimation: true,#}
{#                        formatter: '{value}',#}
{#                        textStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        },#}
{#                        fontSize: 20#}
{#                    },#}
{#                    data: [#}
{#                        {#}
{#                            value: noise,#}
{#                            name: '噪声 （db）'#}
{#                        }#}
{#                    ],#}
{#                    radius: "95%",#}
{#                    splitLine: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisTick: {#}
{#                        lineStyle: {#}
{#                            color: '#FFFFFF'#}
{#                        }#}
{#                    },#}
{#                    axisLabel: {#}
{#                        color: "#fff"#}
{#                    }#}
{#                }#}
{#            ],#}
{#            axisPointer: {#}
{#                lineStyle: {#}
{#                    color: '#FFFFFF'#}
{#                }#}
{#            }#}
{#        };#}
{#        nc_option && nc_myChart.setOption(nc_option);#}
{#    }#}
{##}
{#    $(function () {#}
{#        loadSensorData()#}
{#        setInterval(loadSensorData, 5000)#}
{#    })#}
{#</script>#}
{#图像数据#}
<script>
    loadPicture()

    function loadPicture() {
        let temperature_data = []
        let timelist = []
        $.ajax({
            type: "post",
            url: "/api/image/1",
            async: false,
            datatype: "json",
            success: function (data) {
                {#console.log(data)#}
                let map = new Map(Object.entries(data));
                {#console.log(map.get("data")[0])#}
                // path1 = "<img src='../../image/image2/"+map.get("data")[0].imagePath+".png'>"
                // path2 = "<img src='../../image/image2/"+map.get("data")[1].imagePath+".png'>"
                // path3 = "<img src='../../image/image2/"+map.get("data")[2].imagePath+".png'>"
                // path4 = "<img src='../../image/image2/"+map.get("data")[3].imagePath+".png'>"
                path1 = "<img src='/file/image_02/" + map.get("data")[0]['folder_name'] + "/" + map.get("data")[0]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path2 = "<img src='/file/image_02/" + map.get("data")[1]['folder_name'] + "/" + map.get("data")[1]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path3 = "<img src='/file/image_02/" + map.get("data")[2]['folder_name'] + "/" + map.get("data")[2]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path4 = "<img src='/file/image_02/" + map.get("data")[3]['folder_name'] + "/" + map.get("data")[3]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                document.getElementById("picture1").innerHTML = path1;
                document.getElementById("picture2").innerHTML = path2;
                document.getElementById("picture3").innerHTML = path3;
                document.getElementById("picture4").innerHTML = path4;
                let date1 = new Date(Date.parse(map.get("data")[0].timestamp));
                document.getElementById("timestamp1").innerText = formatDateTime(date1);
                timelist.push(formatDateTime(date1));
                let date2 = new Date(Date.parse(map.get("data")[1].timestamp));
                document.getElementById("timestamp2").innerText = formatDateTime(date2);
                timelist.push(formatDateTime(date2));
                let date3 = new Date(Date.parse(map.get("data")[2].timestamp));
                document.getElementById("timestamp3").innerText = formatDateTime(date3);
                timelist.push(formatDateTime(date3));
                let date4 = new Date(Date.parse(map.get("data")[3].timestamp));
                document.getElementById("timestamp4").innerText = formatDateTime(date4);
                timelist.push(formatDateTime(date4));
            }
        })
    }

    setInterval(loadPicture,5000);

</script>
<!-- 仪表盘 -->
<script>
    let firstSensorTime;
    let secondSensorTime;
    let noiseSensorTime;
    let firstSensorFirstTemperature;
    let firstSensorSecondTemperature;
    let firstSensorHumidity;
    let secondSensorFirstTemperature;
    let secondSensorSecondTemperature;
    let secondSensorFirstHumidity;
    let secondSensorSecondHumidity;
    let noise;
    function loadSensorData() {
        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentTemperature",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                firstSensorTime = formatDateTime(date);
                firstSensorFirstTemperature = map.first_temperature;
                firstSensorSecondTemperature = map.second_temperature;
                firstSensorHumidity = map.humidity;

                // 更新相关的 DOM
                document.getElementById("first_sensor_time1").innerText = firstSensorTime;
                document.getElementById("first_sensor_time2").innerText = firstSensorTime;
                document.getElementById("first_sensor_time3").innerText = firstSensorTime;

                // 更新图表
                updateFirstSensorCharts();
            }
        });

        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentNoise",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                noiseSensorTime = formatDateTime(date);
                noise = map.noise;

                // 更新相关的 DOM
                document.getElementById("noise_sensor_time").innerText = noiseSensorTime;

                // 更新图表
                updateNoiseChart();
            }
        });
    }

    // 更新第一个传感器图表
    function updateFirstSensorCharts() {
        let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');
        let fsftc_myChart = echarts.init(fsftc_chartDom);
        let fsftc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}℃'
            },
            series: [
                {
                    name: '温度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: -30,
                    max: 30,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorFirstTemperature,
                            name: '温度 (℃)'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };

        fsftc_option && fsftc_myChart.setOption(fsftc_option);

        // 第二个温度仪表盘
        let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');
        let fsstc_myChart = echarts.init(fsstc_chartDom);
        let fsstc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}℃'
            },
            series: [
                {
                    name: '温度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: -30,
                    max: 30,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorSecondTemperature,
                            name: '温度 (℃)'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };

        fsstc_option && fsstc_myChart.setOption(fsstc_option);

        // 湿度仪表盘
        let fshc_chartDom = document.getElementById('first_sensor_humidity');
        let fshc_myChart = echarts.init(fshc_chartDom);
        let fshc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: '相对湿度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: 0,
                    max: 100,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorHumidity,
                            name: '相对湿度（%）'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };
        fshc_option && fshc_myChart.setOption(fshc_option);
    }

    // 噪声传感器图表更新
    function updateNoiseChart() {
        let nc_chartDom = document.getElementById('noise_chart');
        let nc_myChart = echarts.init(nc_chartDom);
        let nc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}db'
            },
            series: [
                {
                    name: '噪声',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: 0,
                    max: 100,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: noise,
                            name: '噪声 （db）'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };
        nc_option && nc_myChart.setOption(nc_option);
    }

    $(function () {
        loadSensorData()
        setInterval(loadSensorData, 5000)
    })
</script>

<script>

    // 初始化图表
    function initCharts() {
        // 温度仪表盘
        window.externalTempGauge = echarts.init(document.getElementById('externalTempGauge'));
        window.surfaceTempGauge = echarts.init(document.getElementById('surfaceTempGauge'));
        window.humidityChart = echarts.init(document.getElementById('humidityChart'));
        window.voltageHistoryChart = echarts.init(document.getElementById('voltageHistoryChart'));

        // 温度仪表盘通用配置
        const tempGaugeOption = {
            series: [{
                type: 'gauge',
                min: -60,
                max: 60,
                axisLine: {
                    lineStyle: {
                        color: [[0.3, '#4dabf7'], [0.7, '#69db7c'], [1, '#ff6b6b']],
                        width: 20
                    }
                },
                detail: {
                    formatter: '{value}°C',
                    fontSize: 24,
                    color: '#fff'
                },
                pointer: {show: true}
            }]
        };

        // 初始化仪表盘
        externalTempGauge.setOption(tempGaugeOption);
        surfaceTempGauge.setOption(tempGaugeOption);

        // 湿度环形图
        humidityChart.setOption({
            series: [{
                type: 'pie',
                radius: ['60%', '80%'],
                label: {
                    show: true,
                    position: 'center',
                    fontSize: 24,
                    color: '#fff',
                    formatter: '{d}%'
                },
                data: [{value: 0}, {value: 100}]
            }]
        });

        // 电压历史图表
        voltageHistoryChart.setOption({
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    color: '#fff',
                    fontSize: 12,
                    rotate: -45
                }
            },
            yAxis: {
                name: '电压(V)',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 12
                }
            },
            series: [{
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#69db7c'
                },
                lineStyle: {
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: 'rgba(105,219,124,0.8)'},
                        {offset: 1, color: 'rgba(105,219,124,0.1)'}
                    ])
                }
            }]
        });
    }

    // 数据传输
    let timetamp_list = []
    let detect_image_list = []
    let detect_label_list = []
    let detect_score_list = []
    let spectrogram8_list = []
    let anoinv_score_list = []
    let inversion_score_list = []
    let generation_image_list = []
    let generation_BG_image_list = []
    let sum_image_list = []
    let report_list = []

    {#timestamp日期格式化#}
    function formatTimestamp(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    function loadData()
    {
        $.ajax({
        type: "post",
        async: false,
        url: "/api/data",
        success: function (data) {
            for (let i = 0; i < data.length; i++) {
                let map = new Map(Object.entries(data[i]));
                console.log(map)
                let time = new Date(Date.parse(map.get("timetamp")))
                {#timetamp_list.push(formatDateTime(time))#}
                timetamp_list.push(formatTimestamp(map.get("timetamp")))
                detect_image_list.push(map.get("detect_image"))
                detect_label_list.push(map.get("detect_label"))
                detect_score_list.push(map.get("detect_score"))
                spectrogram8_list.push(map.get("spectrogram8"))

                anoinv_score_list.push(map.get("anoinv_score"))
                inversion_score_list.push(map.get("inversion_score"))
                generation_image_list.push(map.get("generation_image"))
                generation_BG_image_list.push(map.get("generation_BG_image"))
                sum_image_list.push(map.get("sum_image"))
                report_list.push(map.get("report"))
                console.log(detect_score_list[3])
            }

            document.getElementById("newest-detect-img").src = `${detect_image_list[1]}`;
            {#document.getElementById("newest-spectrogram-img").src = `${spectrogram8_list[1]}`;#}
            {#document.getElementById("newest-generation-img").src = `static\\generation_results\\spectrogram\\2018_10_02\\generation_image_Image_12.jpg`;#}
            {#document.getElementById("newest-generation-BG-img").src = `static/generation_results/BG_image/BG_dark_1.png`;#}
            {#document.getElementById("newest-sum-img").src = `static\\generation_results\\summarize\\2018_10_02\\sum_image_Image_10.png`;#}
            document.getElementById("newest-generation-img").src = `${generation_image_list[1]}`;
            document.getElementById("newest-generation-BG-img").src = `${generation_BG_image_list[1]}`;
            document.getElementById("newest-sum-img").src = `${sum_image_list[1]}`;
            console.log(generation_image_list[1]);
            {#console.log(generation_BG_image_list[0]);#}
        }
        })

        $.ajax({
            type: "post",
            url: "/api/new_data",
            success: function (data) {
                let map = new Map(Object.entries(data[0]));
                let timestamp = formatDateTime(new Date(map.get("timetamp")));
                {#let timestamp = map.get("timetamp");#}

                // 更新时间戳
                $('#global-timestamp').text(timestamp);

                // 更新温度仪表盘
                externalTempGauge.setOption({series: [{data: [{value: map.get("temperature")}]}]});
                surfaceTempGauge.setOption({series: [{data: [{value: map.get("ts")}]}]});
                $('#temp-timestamp').text(timestamp);
                $('#ts-timestamp').text(timestamp);

                // 更新湿度图表
                humidityChart.setOption({
                    series: [{
                        data: [
                            {value: map.get("humidity"), name: '当前湿度'},
                            {value: 100 - map.get("humidity")}
                        ]
                    }]
                });
                $('#humidity-value').text(map.get("humidity"));
                $('#humidity-timestamp').text(timestamp);

                // 更新风参数
                $('#wind_speed').text(map.get("wind_speed"));
                const windDir = map.get("wind_direction") || 0;
                $('#wind_direction').text(windDir);
                $('#air_pressure').text(map.get("air_pressure"));
                $('#visibility').text(map.get("visibility"));
                $('#wind-timestamp').text(timestamp);

                // 更新辐射数据
                $('#swd-value').text(map.get("swd"));
                $('#swu-value').text(map.get("swu"));
                $('#lwd-value').text(map.get("lwd"));
                $('#lwu-value').text(map.get("lwu"));
                $('#radiation-timestamp').text(timestamp);

                // 更新辐射进度条
                $('#swdProgress').css('width', `${map.get("swd") / 200 * 100}%`);
                $('#swuProgress').css('width', `${map.get("swu") / 200 * 100}%`);
                $('#lwdProgress').css('width', `${map.get("lwd") / 200 * 100}%`); // 新增长波上行
                $('#lwuProgress').css('width', `${map.get("lwu") / 200 * 100}%`); // 新增长波下行

                // 更新电压历史,待修改
                $.ajax({
                    type: "post",
                    url: "/api/voltage_history",
                    success: function (historyData) {
                        const voltages = historyData.map(d => d.bv);
                        const times = historyData.map(d => {
                            const date = new Date(d.timetamp);
                            return `${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
                        }).reverse();

                        voltageHistoryChart.setOption({
                            xAxis: {data: times},
                            series: [{data: voltages}]
                        });
                        $('#voltage-timestamp').text(timestamp);
                    }
                });

                // 更新降水积雪
                $('#precipitation').text(map.get("precipitation"));
                $('#sd').text(map.get("sd"));

                // 更新风向指针
                const arrow = document.getElementById('windArrow');
                if (arrow) {
                    arrow.style.transform = `rotate(${windDir}deg)`;
                }
            }
        });
    }

    $(function () {
        initCharts()
        loadData()
        setInterval(loadData, 5000)
    })


    {#$(function () {#}
    {#    document.getElementById("timetamp0").innerText = `${timetamp_list[1]}`#}
    {#    document.getElementById("timetamp1").innerText = `${timetamp_list[2]}`#}
    {#    document.getElementById("timetamp2").innerText = `${timetamp_list[3]}`#}
    {#    document.getElementById("timetamp3").innerText = `${timetamp_list[4]}`#}
    {#    document.getElementById("timetamp4").innerText = `${timetamp_list[5]}`#}
    {#    document.getElementById("timetamp5").innerText = `${timetamp_list[6]}`#}
    {#    document.getElementById("timetamp6").innerText = `${timetamp_list[7]}`#}
    {#    document.getElementById("report0").innerText = `${report_list[1]}`#}
    {#    document.getElementById("report1").innerText = `${report_list[2]}`#}
    {#    document.getElementById("report2").innerText = `${report_list[3]}`#}
    {#    document.getElementById("report3").innerText = `${report_list[4]}`#}
    {#    document.getElementById("report4").innerText = `${report_list[5]}`#}
    {#    document.getElementById("report5").innerText = `${report_list[6]}`#}
    {#    document.getElementById("report6").innerText = `${report_list[7]}`#}
    {# })#}


    {#$(function () {#}
    {#    var chartDom = document.getElementById('line-Chart');#}
    {#    var myChart = echarts.init(chartDom);#}
    {#    var option;#}
    {##}
    {#    option = {#}
    {#    xAxis: {#}
    {#        type: 'category',#}
    {#        data: [timetamp_list[8], timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1]]#}
    {#    },#}
    {#    yAxis: {#}
    {#        type: 'value'#}
    {#    },#}
    {#    series: [#}
    {#        {#}
    {#        data: [anoinv_score_list[8], anoinv_score_list[7], anoinv_score_list[6], anoinv_score_list[5], anoinv_score_list[4], anoinv_score_list[3], anoinv_score_list[2], anoinv_score_list[1]],#}
    {#        type: 'line',#}
    {#        smooth: false#}
    {#        },#}
    {#        {#}
    {#        data: [inversion_score_list[8], inversion_score_list[7], inversion_score_list[6], inversion_score_list[5], inversion_score_list[4], inversion_score_list[3], inversion_score_list[2], inversion_score_list[1]],#}
    {#        type: 'line',#}
    {#        smooth: false#}
    {#        }#}
    {#    ]#}
    {#    };#}
    {##}
    {#    option && myChart.setOption(option);#}
    {##}
    {#    $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({#}
    {#      position: 'absolute',#}
    {#      display: 'none',#}
    {#      opacity: 0.8#}
    {#    }).appendTo('body')#}
    {#    $('#line-chart').bind('plothover', function (event, pos, item) {#}
    {##}
    {#      if (item) {#}
    {#        var x = item.datapoint[0].toFixed(2),#}
    {#          y = item.datapoint[1].toFixed(2)#}
    {##}
    {#        $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)#}
    {#          .css({#}
    {#            top: item.pageY + 5,#}
    {#            left: item.pageX + 5#}
    {#          })#}
    {#          .fadeIn(200)#}
    {#      } else {#}
    {#        $('#line-chart-tooltip').hide()#}
    {#      }#}
    {#    })#}
    {##}
    {#    setInterval(myChart.setOption(option), 1000);#}
    {# })#}


    {#$(function () {#}
        {#console.log(detect_score_list[0])#}
    {#    // 受干扰影响曲线图#}
    {#    var ctx = document.getElementById('myChart').getContext('2d');#}
    {#    var myChart = new Chart(ctx, {#}
    {#        type: 'line',#}
    {#        data: {#}
    {#            labels: [timetamp_list[8], timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1]],#}
                {#labels: [timetamp_list[3], timetamp_list[2], timetamp_list[1], timetamp_list[0]],#}
    {#            datasets: [{#}
    {#                label: '图像质量受气象条件影响指数',#}
                    {#data: [detect_score_list[3], detect_score_list[2], detect_score_list[1], detect_score_list[0]],#}
    {#                data: [detect_score_list[8], detect_score_list[7], detect_score_list[6], detect_score_list[5], detect_score_list[4], detect_score_list[3], detect_score_list[2], detect_score_list[1]],#}
    {#                backgroundColor: 'rgba(255, 99, 132, 0.2)',#}
                    {#backgroundColor: 'rgba(255, 255, 255, 1)',#}
    {#                borderColor: 'rgba(255, 99, 132, 1)',#}
    {#                borderWidth: 1#}
    {#            }]#}
    {#        },#}
    {#        options: {#}
                {#backgroundColor: 'rgba(255, 255, 255, 1)',#}
    {#            scales: {#}
    {#                y: {#}
    {#                    beginAtZero: true,#}
    {#                }#}
    {#            }#}
    {#        }#}
    {#    })#}
    {#    $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({#}
    {#        position: 'absolute',#}
    {#        display: 'none',#}
    {#        opacity: 0.8#}
    {#    }).appendTo('body')#}
    {#    $('#line-chart').bind('plothover', function (event, pos, item) {#}
    {##}
    {#        if (item) {#}
    {#            var x = item.datapoint[0].toFixed(2),#}
    {#                y = item.datapoint[1].toFixed(2)#}
    {##}
    {#            $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)#}
    {#                .css({#}
    {#                    top: item.pageY + 5,#}
    {#                    left: item.pageX + 5#}
    {#                })#}
    {#                .fadeIn(200)#}
    {#        } else {#}
    {#            $('#line-chart-tooltip').hide()#}
    {#        }#}
    {#    })#}
    {# })#}

</script>
<style>
/* 自定义样式 */
.timestamp-label { color: #6c757d; font-size: 1.2rem; }
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.param-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.param-value { font-size: 1.2rem; font-weight: bold; }
.radiation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.progress-container { margin-bottom: 15px; }
.progress-label { color: #fff; margin-bottom: 5px; }
.precipitation-box, .snow-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.precipitation-info, .snow-info { flex-grow: 1; }
.precipitation-value, .snow-value {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}
.wind-dial-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.wind-direction-arrow {
    position: absolute;
    width: 2.5px;
    height: 80%;
    background: #ffd700;
    left: 50%;
    transform-origin: bottom;
    transition: transform 0.5s ease;
}
/* 风向数值居中 */
.wind-info {
    text-align: center;
}
.wind-info #wind_direction {
    font-size: 1.5rem;
    line-height: 1.2;
}

/* 参数标题放大 */
.param-label {
    font-size: 1.2rem !important;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #fff;
}
.param-value {
    font-size: 1.2rem;
    font-weight: bold;
}
.param-unit {
    font-size: 1.2rem;
    margin-left: 4px;
}
.param-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
</style>
</body>
</html>
